<template>
  <div>
    <checked-title title="案件类型占比"></checked-title>
    <div id="anjianleixing" style="height: 380px;" ref="echarts"></div>
  </div>
</template>
<script>
import { YingPanShiDian } from '@/api'
export default {
  components: {},
  data() {
    return {

    }
  },
  mounted() {
    this.getList()
    // this.initechart()
  },
  methods: {
    //接口数据
    getList(){
      YingPanShiDian.getOrderType().then(res=>{
        this.initechart(res.data)
      })
    },
    // 销毁
    desHander() {
      let myChart = echarts.init(this.$refs.echarts)
      myChart.dispose()
    },
    //echarts
    initechart(data) {
      //处理数据
      let dataList = data.map(ite=>{
        return {
          value:ite.count,
          name:ite.bigType
        }
      })
      //图表
      let chartajcl = null
      chartajcl = echarts.init(document.getElementById('anjianleixing'))
      const backgroundColor = ''
      const title = {
        text: '',
        textStyle: {
          color: '#fff',
          fontSize: 16,
        },
        padding: 0,
        top: 35,
        left: 'center',
      }
      const legend = {
            height:'20%',
            icon: 'circle', //圆角矩形
            x:'center',
            y:'bottom',
            itemGap: 7,
            itemWidth: 12,
            itemHeight: 12,
            orient: 'vertical',
            right: 0,
            bottom: 'bottom',
            textStyle: {
                fontSize: 14,
                color: '#ffffff',
            },

      }
      const tooltip = {
        show: true,
        formatter: '{b}:{d}%',
      }
      const color = [
        '#5E7EF6',
        '#87CBFF',
        '#879DFF',
        '#DA88FF',
        '#B057D8',
        '#E4BCF3',
        '#30D7C2',
        '#56E0CF',
        '#0DC6DC',
      ]
      let option = {
        backgroundColor,
        color,
        title,
        tooltip,
        legend,
        series: [
          {
            type: 'pie',
            radius: ['0%', '30%'],
            center: ['50%', '45%'],
            itemStyle: {
              background: '#fff',
              color: '#fff',
            },
            silent: true,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 0,
                name: '',
              },
            ],
          },
          {
            name: '网络安全设备',
            type: 'pie',
            center: ['50%', '45%'], //圆心的位置
            top: '0%', //单单指的饼图距离上面的距离，top越大饼图越小
            left: '0%', //单单指的饼图距离左面的距离，会改变饼图的大小
            radius: ['30%', '75%'], //实心圆[内半径=0，外半径] 外半径越大，圆越大
            clockwise: true, //顺时针排列
            startAngle: 90, //起始角度 影响不大
            roseType: {
              color: '#fff',
            }, // 实心圆 不能出现roseType这个属性
            label: {
              show: false, //false不显示饼图上的标签
              position: 'outside', //inside（在饼图上显示）,outside(默认就会出现引导线) center
              formatter: '{b}:{c}',
            },
            //只有设置了label:show=ture;position=outside 设置labelLine才会有效
            labelLine: {
              show: false, //显示引导线
              length: 30, //连接饼图第1段线条的长度 length length2 不写自适应
              length2: 30, //链接饼图第2段线条长度
              smooth: false, //是否光滑连接线
            },
            itemStyle: {
              //每个扇形的设置
              borderColor: 'rgba(0,0,0,.1)', //扇形边框颜色
              borderWidth: 1, //扇形边框大小 要先给borderColor颜色 设置borderWidth才会有效果
            },
            data: dataList, //数组从大到小排序

            emphasis: {
              //启用鼠标放上去放大效果，这个挺好的
              scale: true,
              scaleSize: 10,
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }

      chartajcl.setOption(option, true)
    },
  },
  beforeDestroy() {
    this.desHander()
  },
}
</script>

<style lang="less" scoped></style>
